@use "theme/globals" as *;

:host {
    --horizontal-spacing: var(--mdl-spacing-4);
    --vertical-spacing: var(--mdl-spacing-2);
    --colored-box-padding: var(--mdl-spacing-2);
    --card-border-width: 0px;
    --card-radius: 0px;
    --card-background: transparent;
    --activity-border: 1px solid var(--stroke);
    --card-padding-bottom: var(--vertical-spacing);

    &:last-child {
        --activity-border: 0px;
        --card-padding-bottom: 0px;
    }

    ion-card {
        margin: var(--vertical-spacing) var(--horizontal-spacing);
        padding: 0px;
        --ion-card-border-width: var(--card-border-width);
        --ion-card-radius: var(--card-radius);
        --ion-card-background: var(--card-background);
        padding-bottom: var(--card-padding-bottom);
        border-bottom: var(--activity-border);
    }

    ion-badge {
        @include margin-horizontal(null, 4px);
        font: var(--mdl-typography-body-font-sm);
        display: inline-flex;
        align-items: center;
        ion-icon {
            @include margin-horizontal(0px, 4px);
        }
    }

    ion-item {
        --padding-start: 0px;
        --inner-padding-end: 0px;
        --background: transparent;
        ion-label {
            margin-top: 0px;
            margin-bottom: 0px;
        }
    }

    .activity-main {
        --min-height: 52px;
        display: flex;
        flex-direction: row;

        core-mod-icon {
            --module-icon-padding: 0px;
            --module-legacy-icon-padding: 4px;
            --module-icon-radius: var(--mdl-shape-borderRadius-xs);

            @include margin-horizontal(null, 8px);
            align-self: self-start;
        }

        .activity-title {
            flex-grow: 1;
            align-self: center;
            @include margin-horizontal(null, var(--horizontal-spacing));

            .item-heading ion-icon {
                @include margin-horizontal(8px, null);
                vertical-align: middle;
            }
        }

        .core-module-buttons {
            align-self: self-start;

            display: flex;
            flex-flow: row;
            align-items: center;
            z-index: 1;
            justify-content: flex-end;
            align-content: center;

            ion-button.core-module-button-more {
                cursor: pointer;
                pointer-events: auto;
                margin: 0px 8px;
                --a11y-target-min-size: 32px;
                width: var(--a11y-target-min-size);
                height: var(--a11y-target-min-size);
                min-width: var(--a11y-target-min-size);
                min-height: var(--a11y-target-min-size);
                --padding-start: 0px;
                --padding-end: 0px;
                ion-icon {
                    font-size: var(--mdl-typography-icon-fontSize-md);
                }
            }

            core-course-module-completion {
                --margin: 0px;
            }
        }

        core-mod-icon,
        .activity-title,
        .core-module-buttons {
            margin-top: var(--vertical-spacing);
            margin-bottom: var(--vertical-spacing);
        }
    }

    .core-module-description ::ng-deep img,
    .activity-title .item-heading core-format-text ::ng-deep img {
        border-radius: var(--mdl-shape-borderRadius-lg);
    }

    core-course-module-completion {
        --margin: var(--vertical-spacing) 0px;
    }

    .activity-dates {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        core-reminders-date {
          --display-icon: none;
        }
    }

    .activity-description-availabilityinfo,
    .activity-extrabadges {
        margin-top: var(--vertical-spacing);
        margin-bottom: var(--vertical-spacing);
    }

    .core-module-description {
        display: block;
    }

    .activity-extrabadges {
        font: var(--mdl-typography-body-font-md);
        color: var(--medium);
        border: 1px solid var(--stroke);
        border-radius: var(--mdl-shape-borderRadius-sm);
        padding: var(--mdl-spacing-2) var(--mdl-spacing-3) var(--mdl-spacing-2) var(--mdl-spacing-3);
    }

    .activity-description-availabilityinfo .core-module-availabilityinfo {
        background: var(--gray-300);
        font: var(--mdl-typography-label-font-lg);

        ::ng-deep ul {
            margin-top: 8px;
            margin-bottom: 0px;

            li {
                margin-bottom: 4px;
            }
        }
    }

    .core-module-loading {
        width: 100%;
        text-align: center;
        padding-top: 10px;
        clear: both;
    }

    .colored-box-with-icon {
        margin-top: var(--vertical-spacing);
        margin-bottom: var(--vertical-spacing);

        border: 0px;
        padding: var(--colored-box-padding);
        border-radius: var(--mdl-shape-borderRadius-sm);

        ion-icon {
            @include margin-horizontal(null, var(--mdl-spacing-2));
            margin-top: auto;
            margin-bottom: auto;
        }

        &.core-course-last-module-viewed {
            display: flex;
            background-color: var(--info-tint);
            color: var(--info-shade);
            font: var(--mdl-typography-label-font-md);
        }
    }

    @include media-breakpoint-down(md) {
        .core-module-buttons core-course-module-completion {
            display: none;
        }
    }

    @include media-breakpoint-up(md) {
        core-course-module-completion.activity-extra {
            display: none;
        }
    }

    &.indented ion-card {
        @include margin-horizontal(calc(var(--horizontal-spacing) + 1rem), null);
    }

    // Hide download folder icon meanwhile MOBILE-4147 is not solved
    core-format-text.core-module-description ::ng-deep .description-inner .navitem {
        display: none;
    }

}


:host-context(:root.dark) {
    .activity-description-availabilityinfo {
        .core-module-availabilityinfo {
            background: var(--gray-800);
        }
    }

    .colored-box-with-icon.core-course-last-module-viewed {
        background-color: var(--info-shade);
        color: var(--info-tint);
    }
}
